<ion-header>
  <ion-toolbar>
    <div class="signin_title">
      <div class="brand"><img src="../../../../assets/images/android/drawable-mdpi/logo.png" alt=""></div>
      <div class="sign_btn" (click)="signUp()">{{'auth.signinSMS.signUp' | translate}}</div>
    </div>
  </ion-toolbar>
</ion-header>
<div class="login_content">
  <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="signInWithSMS()">
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-label class="login_title">
          {{'auth.signinSMS.welcome_back' | translate}}
        </ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-header class="login_word">
          {{'auth.signinSMS.mobile_number_login' | translate}}
        </ion-header>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-grid>
          <ion-row class="input-border-bottom">
            <ion-col size="4">
              <ion-select placeholder="Select" interface="popover" [(ngModel)]="appUser.countryCode" formControlName="countryCode">
                <ion-select-option value="86">+86</ion-select-option>
                <ion-select-option value="62">+62</ion-select-option>
              </ion-select>
            </ion-col>
            <ion-col size="8">
              <ion-input type="number" maxlength=30 placeholder="{{'auth.signinSMS.mobile_number' | translate}}" 
              clearInput="true" 
              required
              formControlName="mobileNumber"></ion-input>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="12" *ngIf="mobileNumber.invalid && (mobileNumber.dirty || mobileNumber.touched)">
              <div *ngIf="mobileNumber.errors.required" class="form-error-item">
                {{'auth.signinSMS.mobileNumber_required' | translate}}
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-grid>
          <ion-row class="input-border-bottom">
            <ion-col size="9">
              <ion-input type="number" maxlength=10  placeholder="{{'auth.signinSMS.code' | translate}}" 
              clearInput="true" 
              required 
              formControlName="verificationCode"></ion-input>
            </ion-col>
            <ion-col size="3" class="send_words" *ngIf="!sendView">
              <span>Resend After {{smsCountDown}}s</span>
            </ion-col>
            <ion-col size="3" class="send_btn" *ngIf="sendView">
              <ion-button fill="clean" size="small" (click)="sendVerificationCode()">
                {{'auth.signinSMS.send' | translate}}
              </ion-button>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="12" *ngIf="verificationCode.invalid && (verificationCode.dirty || verificationCode.touched)">
              <div *ngIf="verificationCode.errors.required" class="form-error-item">
                {{'auth.signinSMS.verificationCode_required' | translate}}
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="1">
          <ion-icon name="radio-button-off-outline" class="agreement_icon" *ngIf="!consentAgreement" (click)="changeConsentAgreement()"></ion-icon>
          <ion-icon name="checkmark-circle" class="agreement_icon" *ngIf="consentAgreement" (click)="changeConsentAgreement()"></ion-icon>
      </ion-col>
      <ion-col size="11">
        <div class="agreement_word">
          <span class="agreement_word_front">{{'auth.signinSMS.read_agree' | translate}}</span> <a (click)="lookAgreement()">Terms and conditions of this Agreement.</a>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-button class="customer-btn" fill="clear" expand="block" type="submit" [disabled]='validateForm.invalid || loading'>
          {{'auth.signinPassword.sign_in' | translate}}
          <ion-spinner [hidden]="!loading"></ion-spinner>
        </ion-button>
        <div class="signin_item">
          <div (click)="presentActionSheet()">{{'auth.signinPassword.switch_login_method' | translate}}</div>
          <div (click)="inputMobileNumber()" class="reset-pwd">{{'auth.signinPassword.reset_password' | translate}}</div>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>
</div>


